<template>
	<view class="content">
		<!-- 轮播 -->
		<swiper class="swiper-banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<view class="swiper-item">
					<image :src="item.pic"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 菜单 -->
		<view class="mnue">
			<view v-for="(item, index) in menuList" :key="index" class="item">
				<image :src="item.img" mode=""></image>
				<text>{{ item.text }}</text>
			</view>
		</view>
		
		<!-- 推荐 -->
		<scroll-view  scroll-x class="like">
			<view v-for="(item, index) in likeList" :key="index" class="item">
				<view class="img">
					<image :src="item.picUrl" mode=""></image>
				</view>
				<div class="text">{{ item.name }}</div>
			</view>
		</scroll-view>
			
		<!-- hotMusic -->
		<view class="hotMusic">
			<!--  标题 -->
			<view class="title">
				<text>新歌速递</text>
				<i class="iconfont icon-back"></i>
			</view>
			<!-- item -->
			<view v-for="(item, index) in newMusicList" @click="playMusic(item)" :key="index" class="item">
				<!-- left -->
				<view class="left">
					<image :src="item.album.blurPicUrl" mode=""></image>
				</view>
				<view class="mid">
					<view class="top">
						<view class="top-left">
							{{ item.album.name }}
						</view>
						<view class="top-right">
							{{ item.album.subType }}
						</view>
					</view>
					<view class="bom">
						<text v-for="(item1, index1) in item.album.artists" :key="index1">{{ index1 > 0 ? item1.name + '/' : item1.name}}</text>
					</view>
					
				</view>
				<view class="right">
					<view class=""></view>
					<view class=""></view>
					<view class=""></view>
				</view>
			</view>
			
		</view>
		
		<!-- play组件 -->
		<PlayBox @gotoPlay='gotoPlay' :musicArry='musicArry' :musicIndex='musicIndex' ref="playBox"></PlayBox>
		
	</view>
</template>

<script>
	import playBox from '@/components/play/playMusic.vue'
	export default {
		components: {
			playBox
		},
		data() {
			return {
				API: 'https://service-pci51ovc-1257660648.gz.apigw.tencentcs.com', // api： https://service-pci51ovc-1257660648.gz.apigw.tencentcs.com
				imgList: [],
				menuList: [{
					img: '/static/menu/1.png',
					text: '每日推荐'
				}, {
					img: '/static/menu/2.png',
					text: '每日歌单'
				}, {
					img: '/static/menu/3.png',
					text: '歌手'
				}, {
					img: '/static/menu/4.png',
					text: '排行榜'
				}, {
					img: '/static/menu/5.png',
					text: '有声书'
				}],
				
				likeList: [],
				newMusicList: [],
				musicObj: {
					url: 'http://music.163.com/song/media/outer/url?id=2048362753.mp3',
					musicName: 'Perfect Version Of Me',
					AuthorName: 'Vicky宣宣',
					img: 'http://p2.music.126.net/Ya7TklscBN_5JfKprV5q4A==/109951168620723345.jpg?param=300x300'
				},
				musicArry: [
					{
						url: 'http://music.163.com/song/media/outer/url?id=2048362753.mp3',
						musicName: 'Perfect Version Of Me',
						AuthorName: 'Vicky宣宣',
						img: 'http://p2.music.126.net/Ya7TklscBN_5JfKprV5q4A==/109951168620723345.jpg?param=300x300'
					}
				],
				musicIndex: 0
				
			}
		},
		onLoad() {
			this.bannerData();
			this.likerData();
			this.newMusic();
			
		
		},
		methods: {
			// 轮播数据接口
			bannerData() {
				let that = this;
				uni.request({
					url: `${that.API}/banner?type=2`,
					success(res) {
						that.imgList = res.data.banners;
						console.log(res.data.banners, '轮播数据接口')
					}
				})
			},
			// 推荐歌单数据接口
			likerData() {
				let that = this;
				uni.request({
					url: `${that.API}/personalized?limit=6`,
					success(res) {
						that.likeList = res.data.result;
						console.log(res.data.result, '轮播数据接口')
					}
				})
			},
			// 新歌速递接口
			newMusic() {
				let that = this;
				uni.request({
					url: `${that.API}//top/song?type=7`,
					success(res) {
						// that.likeList = res.data.result;
						that.newMusicList = res.data.data.splice(0, 10);
						console.log(res.data.data.splice(0, 10), '新歌速递接口')
					}
				})
			},
			// 点击播放音乐
			playMusic(item) {
				const { name, mp3Url} = item;
				let obj = {
					url: 'http://music.163.com/song/media/outer/url?id=2053420961.mp3',
					musicName: name,
					AuthorName: '',
					img: item.album.blurPicUrl
				}
				item.album.artists.forEach((item, index) => {
					if(index > 1) {
						obj.AuthorName += '/' + item.name
					} else {
						obj.AuthorName += item.name
					}
					
				})
				this.musicArry[0] = obj;
				// this.$refs.playBox.palyMusic();
				console.log(obj, '音乐对象')
			},
			// 点击跳转到播放详情
			gotoPlay() {
				const query = {
					index: this.musicIndex,
					array: this.musicArry
				}
				console.log(query, '8888')
				uni.navigateTo({
					url: `/pages/index/playdetail?query=${encodeURIComponent(JSON.stringify(query))}`
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding-top: 200rpx;
		width: 100%;
		height: 100vh;
		// background: linear-gradient(#291c25, 10%,  #1a1a24);
		.swiper-banner {
			width: 100%;
			height: 280rpx;
			.swiper-item {
				// width: 100%;
				height: 100%;
				border-radius: 15rpx;
				overflow: hidden;
				margin: 0 35rpx;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.mnue {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 50rpx 35rpx 0 35rpx;
			.item {
				display: flex;
				flex-direction: column;
				 align-items: center;
				image {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 15rpx;
				}
				text {
					font-size: 26rpx;
				}
			}
		}
		.like {
			margin-top: 50rpx;
			white-space: nowrap;
			
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
			}
			.item {
				margin-right: 20rpx;
				display: inline-grid;
				.img {
					width: 250rpx;
					height: 250rpx;
					border-radius: 15rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					margin-top: 10rpx;
					line-height: 35rpx;
					font-size: 24rpx;
					width: 250rpx;
					white-space: normal !important;
				}
			}
			.item:first-of-type{
				margin-left: 35rpx;
			}
			.item:last-of-type{
				margin-right: 35rpx;
			}
		}
		.hotMusic {
			margin-top: 50rpx;
			.title {
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text {
					font-size: 36rpx;
					font-weight: 700;
					line-height: 52.12rpx;
				}
				.icon-back {
				}
			}
			.item {
				padding: 25rpx 35rpx 0 30rpx;
				display: flex;
				align-items: center;
				.left {
					width: 110rpx;
					height: 110rpx;
					border-radius: 20rpx;
					background-color: #000;
					margin-right: 15rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.mid {
					flex: 1;
					.top {
						display: flex;
						align-items: center;
						.top-left {
							max-width: 350rpx;
							font-size: 32rpx;
							font-weight: 500;
							line-height: 46.34rpx;
							color: rgba(19, 13, 20, 1);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							
						}
						.top-right {
							margin-left: 25rpx;
							border-radius: 8rpx;
							background: rgba(255, 99, 131, 0.11);
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 4rpx 8rpx 4rpx 8rpx;
							
							font-size: 20rpx;
							font-weight: 500;
							line-height: 20rpx;
							color: rgba(255, 99, 131, 1);
						}
					}
					.bom {
						max-width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text {
							font-size: 24rpx;
							font-weight: 500;
							line-height: 33.6rpx;
							color: rgba(13, 19, 20, 0.4);
						}
					}
				}
				.right {
					view {
						width: 8rpx;
						height: 8rpx;
						background: rgba(19, 13, 20, 0.2);
						border-radius: 50%;
					}
					view:nth-child(2){
						margin: 8rpx 0;
					}
				}
			}
			
		}
		
		
	}
	
	
</style>
